import React, { useState } from 'react'
import { useAppDispatch, useAppSelector } from './app/hooks'
import { modifyNickname, modifyPermission, signin } from './app/user/userSlice'

const App = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const nickname = useAppSelector(state => state.user.nickname)
  const token = useAppSelector(state => state.user.token)
  const permission = useAppSelector(state => state.user.permission)
  const avator = useAppSelector(state => state.user.avator)

  const dispatch = useAppDispatch()

  return (
    <div>
      <button onClick={() => dispatch(modifyNickname())}>修改昵称</button>
      <button onClick={() => dispatch(modifyPermission('123456789'))}>修改权限</button>
      <button onClick={() => dispatch(signin({ username, password }))}>登录</button>

      <h1>昵称： {nickname}</h1>
      <h1>令牌：{token}</h1>
      <h1>头像: {avator}</h1>
      <h1>权限：{permission}</h1>
      <h1>用户登录</h1>
      <input type="text" value={ username } onChange={ e => setUsername(e.target.value) }/>
      <input type="text" value={ password } onChange={ e => setPassword(e.target.value) }/>
    </div>
  )
}

export default App